<script setup lang="ts">
  import { Field } from 'vee-validate';
  import { DynamicSelectOption } from '@/components/types';
  import { useLocale } from '@/locales/useLocale';
  import { ref, Ref } from 'vue';
  const { t } = useLocale();

  const props = withDefaults(
    defineProps<{
      name: string;
      options?: Ref<DynamicSelectOption[][]>;
      placeholder?: string;
      label?: string;
      requiredField?: boolean;
      parentId?: number;
      size?: 'large' | 'small' | 'default';
      animateClass?: string;
    }>(),
    {
      name: 'default',
      label: '',
      placeholder: '',
      //@ts-ignore
      options: ref([]) as Ref<DynamicSelectOption[][]>,
      requiredField: false,
      parentId: 1,
      size: 'default',
      animateClass: '',
    }
  );
</script>

<template>
  <Field :name="name" v-slot="{ value, field, errorMessage }">
    <el-form-item
      :error="errorMessage"
      :label="label && t(label)"
      :class="{ 'field-required': requiredField, [animateClass]: animateClass }"
      :size="size"
    >
      <el-select
        :model-value="value"
        :placeholder="placeholder && t(placeholder)"
        v-bind="{ ...field, ...$attrs }"
      >
        <el-option
          v-for="item in options.value[parentId]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </Field>
</template>

<style lang="scss"></style>
